<template>
	<div class="container" @click="handleGallaryClick">
	    <div class="wrapper">
	    	<swiper :options="swiperOptions">
			    <swiper-slide v-for="(item,index) in imgs" :key="index">
			       <img class="gallary-img" :src="item" >
			    </swiper-slide>
			    
			   
			    <div 
			    class="swiper-pagination"  
			    slot="pagination"

			    ></div>
			 </swiper>
	    </div>
	</div>
</template>

<script>
    
	export default{
		name:'CommonGallary',
		props:{
			imgs:{
				type:Array,
				default () {
					return []
				}
			}
		},
		data(){
			return{
				swiperOptions:{
					pagination:'.swiper-pagination',
					paginationType:'fraction',
					observeParents:true,
					observer:true
				}
			}
		},
		methods:{
			handleGallaryClick(){
				this.$emit('close')
			}
		}
		
	}
</script>

<style lang="stylus" scoped>
    .container >>> .swiper-container
       overflow:inherit
	.container
	   display:flex
	   flex-direction:column
	   justify-content:center
	   z-index:99
	   position:fixed
	   left:0
	   right:0
	   top:0
	   bottom:0
	   background:#000
	   .wrapper
	      
	       height:0
	       width:100%
	       padding-bottom:100%
	       .gallary-img
	          width:100%
	       .swiper-pagination
	          color:#fff
	          bottom:-1rem
           
 
</style>